<template>
	<view>
		<swiper :indicator-dots="true" class="swiper">
			<swiper-item>
				<u-grid col="4">
					<u-grid-item :customStyle="{width:250+'rpx',height:150+'rpx'}" v-for="(item, index) in swiperList"
						:index="index" :key="index">
						<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="item.name" :size="22"></u-icon>
						<text class="grid-text">{{ item.title }}</text>
					</u-grid-item>
				</u-grid>
			</swiper-item>
			<swiper-item>
				<u-grid>
					<u-grid-item :customStyle="{width:250+'rpx',height:150+'rpx'}" v-for="(item, index) in swiperList"
						:index="index + 8" :key="index">
						<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="item.name" :size="22"></u-icon>
						<text class="grid-text">{{ item.title }}</text>
					</u-grid-item>
				</u-grid>
			</swiper-item>
			<swiper-item>
				<u-grid>
					<u-grid-item :customStyle="{width:250+'rpx',height:150+'rpx'}" v-for="(item, index) in swiperList"
						:index="index + 16" :key="index">
						<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="item.name" :size="22"></u-icon>
						<text class="grid-text">{{ item.title }}</text>
					</u-grid-item>
				</u-grid>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [{
					title: '甜品饮品',
					name: 'https://cdn.uviewui.com/uview/goods/1.jpg'
				}, {
					title: '商超便利',
					name: 'https://cdn.uviewui.com/uview/goods/2.jpg'
				}, {
					title: '美食',
					name: 'https://cdn.uviewui.com/uview/goods/6.jpg'
				}, {
					title: '简餐',
					name: 'https://cdn.uviewui.com/uview/goods/5.jpg'
				}, {
					title: '新店特惠',
					name: 'https://cdn.uviewui.com/uview/goods/2.jpg'
				}, {
					title: '准时达',
					name: 'https://cdn.uviewui.com/uview/goods/3.jpg'
				}, {
					title: '预定早餐',
					thumb: 'https://cdn.uviewui.com/uview/goods/4.jpg'
				}, {
					title: '土豪推荐',
					thumb: 'https://cdn.uviewui.com/uview/goods/1.jpg'
				}],
			}
		},
		methods: {

		}
	}
</script>

<style>
	.swiper {
		width: 100%;
		height: 340rpx;
	}
	.grid-text {
	        font-size: 14px;
	        color: #909399;
	        padding: 10rpx 0 20rpx 0rpx;
	        /* #ifndef APP-PLUS */
	        box-sizing: border-box;
	        /* #endif */
	    }
</style>